<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>danmu app</title>
    <script src="../common/js/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../danmu/css/bootstrap.min.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="../danmu/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../danmu/css/barrager.css">
    <script type="text/javascript" src="../danmu/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../danmu/js/tinycolor-0.9.15.min.js"></script>
    <script type="text/javascript" src="../danmu/js/jquery.barrager.min.js"></script>
    <script src="rabbitmq/sockjs-0.3.js"></script>
    <script src="rabbitmq/stomp.js"></script>
</head>
<body style="background-color: #0e90d2">
<div>
    <h3>damu app</h3>
    <h1 id="content"></h1>
    <h2 class="danmu"></h2>
</div>
<script>
    var has_had_focus = false;
    var pipe = function (el_name, send) {
        var div = $(el_name + ' div');
        var inp = $(el_name + ' input');
        var form = $(el_name + ' form');

        var print = function (m, p) {
            p = (p === undefined) ? '' : JSON.stringify(p);
            /*div.append($("<code>").text(m + ' ' + p));
            div.scrollTop(div.scrollTop() + 10000);*/

            if(el_name == "#first"){
                var contentMessage = $.parseJSON(m);
                var item = {
                    'img': contentMessage.headImgUrl,
                    'href': 'http://www.baidu.com',
                    'info': contentMessage.name,
                    close: false
                };
                $('body').barrager(item);
//                document.getElementById("content").innerHTML += m + '<br />';
                console.info("p",p,"m",m);
            }
            if(el_name == "#second"){
                console.info(m + ' ' + p);
            }
        };

        if (send) {
            form.submit(function () {
                send(inp.val());
                inp.val('');
                return false;
            });
        }
        return print;
    };

    var print_first = pipe('#first', function (data) {
//        client.send('/topic/test', {"content-type":"text/plain"}, data);
    });

    // Stomp.js boilerplate
    var url = "ws://" + window.location.host + "/ws";
    if (location.search == '?ws') {
        var ws = new WebSocket('ws://127.0.0.1:15674/ws');
    } else {
        var ws = new SockJS('http://127.0.0.1:15674/stomp');
    }

    // Init Client
    var client = Stomp.over(ws);

    // SockJS does not support heart-beat: disable heart-beats
    client.heartbeat.outgoing = 0;
    client.heartbeat.incoming = 0;
    client.debug = pipe('#second');

    // Declare on_connect
    var on_connect = function (x) {
        client.subscribe("/exchange/rabbitmq/rabbitmq_routingkey", function (d) {
            print_first(d.body);
        });
    };

    // Declare on_error
    var on_error = function () {
        console.log('error');
    };

    // Conect to RabbitMQ
    client.connect('guest', 'guest', on_connect, on_error, '/');

    $('#first input').focus(function () {
        if (!has_had_focus) {
            has_had_focus = true;
            $(this).val("");
        }
    });
</script>
</body>
</html>